<template>
    <div>
        <swiper :key="looplist.length" ref="myswiper">
            <div class="swiper-slide" v-for="data in looplist" :key="data.bannerId">
                <img :src="data.imgUrl">
                <!-- <img src="../../public/img/swiperphoto/a.png" alt=""> -->
            </div>
        </swiper>
        <filmheader :class="isFixed? 'fixed':''"></filmheader>
        <router-view></router-view>
    </div>
</template>
<script>
import Vue from 'vue'
import swiper from '@/views/Film/Swiper.vue'
import filmheader from '@/views/Film/Filmheader.vue'
import axios from 'axios'
var VueTouch = require('vue-touch')
Vue.use(VueTouch, { name: 'v-touch' })
export default {
  data () {
    return {
      isFixed: false,
      looplist: [
        {
          bannerId: 1,
          imgUrl: 'img/swiperphoto/a.png'
        },
        {
          bannerId: 2,
          imgUrl: 'img/swiperphoto/b.png'
        },
        {
          bannerId: 3,
          imgUrl: 'img/swiperphoto/c.png'
        }
      ]
    }
  },
  components: {
    swiper,
    filmheader
  },
  mounted () {
    axios({
      url: 'https://m.maizuo.com/gateway?type=2&cityId=110100&k=5133861',
      headers: {
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"16239969753025057135722497","bc":"110100"}',
        'X-Host': 'mall.cfg.common-banner'
      }
    }).then(res => {
      if (res.data.data) {
        this.looplist = res.data.data
      }

      // console.log(this.looplist)
    })
    window.onscroll = this.handleScroll
  },
  beforeDestroy () {
    window.onscroll = null
  },
  methods: {
    handleScroll () {
      // console.log(document.documentElement.scrollTop, this.$refs.myswiper.$el.offsetHeight)
      if (document.documentElement.scrollTop >= this.$refs.myswiper.$el.offsetHeight) {
        // console.log('fixed')
        this.isFixed = true
      } else {
        // console.log('unfixed')
        this.isFixed = false
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.swiper-slide{
    img{
        width:100%;
    }
}
</style>
